import React from 'react'
// 导入antd-moile库
import { NavBar, Icon} from "antd-mobile";
// 导入withRouter 高阶组件
import {withRouter} from 'react-router-dom'
// 导入prop-types校验
import PropTypes from 'prop-types'
// import "./index.css"
import styles from './index.module.css'
// 添加修改样式的className和右侧的icon
function NavHeader({children,history,onLeftClick,className,
  rightContent}) {
  // 添加props校验
  NavHeader.propTypes = {
    children:PropTypes.string.isRequired,
    onLeftClick:  PropTypes.func,
    rightContent: PropTypes.array,
    className: PropTypes.string
  }
  const defaultHeader = () => history.go(-1)
    return (
        <NavBar
        className={[styles.navBar, className || ''].join(' ')}
        mode="light"
        icon={<Icon type="left" size="lg" />}
        onLeftClick={ onLeftClick || defaultHeader }
        rightContent={rightContent}
      >
        {children}
      </NavBar>
    )
}
export default withRouter(NavHeader)